<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报告中心 - SimpleHire</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-dark: #4f46e5;
            --secondary-color: #f8fafc;
            --accent-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border-color: #e2e8f0;
            --border-radius: 12px;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: var(--text-primary);
        }
        
        .main-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            margin: 2rem auto;
            max-width: 1200px;
            overflow: hidden;
        }
        
        .page-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 2rem;
            text-align: center;
        }
        
        .page-header h1 {
            margin: 0;
            font-weight: 700;
            font-size: 2.5rem;
        }
        
        .page-header p {
            margin: 0.5rem 0 0 0;
            opacity: 0.9;
            font-size: 1.1rem;
        }
        
        .stats-section {
            padding: 2rem;
            background: var(--secondary-color);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
        }
        
        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            text-align: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .reports-section {
            padding: 2rem;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .report-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 1.5rem;
        }
        
        .report-card {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            transition: all 0.2s ease;
        }
        
        .report-card:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }
        
        .report-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .report-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }
        
        .report-icon.interview {
            background: linear-gradient(135deg, var(--accent-color), #059669);
        }
        
        .report-icon.match {
            background: linear-gradient(135deg, var(--warning-color), #d97706);
        }
        
        .report-icon.comprehensive {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        }
        
        .report-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0;
        }
        
        .report-description {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin: 0.5rem 0 1rem 0;
            line-height: 1.5;
        }
        
        .report-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        .btn-export {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .btn-export.primary {
            background: var(--primary-color);
            color: white;
        }
        
        .btn-export.primary:hover {
            background: var(--primary-dark);
            color: white;
        }
        
        .btn-export.secondary {
            background: var(--secondary-color);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .btn-export.secondary:hover {
            background: var(--border-color);
            color: var(--text-primary);
        }
        
        .empty-state {
            text-align: center;
            padding: 3rem;
            color: var(--text-secondary);
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }
        
        .data-table {
            margin-top: 1.5rem;
        }
        
        .table {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .table th {
            background: var(--secondary-color);
            border: none;
            font-weight: 600;
            color: var(--text-primary);
            padding: 1rem;
        }
        
        .table td {
            border: none;
            padding: 1rem;
            vertical-align: middle;
        }
        
        .table tbody tr {
            border-bottom: 1px solid var(--border-color);
        }
        
        .table tbody tr:hover {
            background: var(--secondary-color);
        }
        
        .score-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .score-excellent {
            background: #dcfce7;
            color: #166534;
        }
        
        .score-good {
            background: #fef3c7;
            color: #92400e;
        }
        
        .score-average {
            background: #fed7d7;
            color: #c53030;
        }
        
        .action-btn {
            padding: 0.25rem 0.5rem;
            border: none;
            border-radius: 6px;
            font-size: 0.8rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            transition: all 0.2s ease;
        }
        
        .action-btn.pdf {
            background: #dc2626;
            color: white;
        }
        
        .action-btn.pdf:hover {
            background: #b91c1c;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light" style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/" style="color: var(--primary-color);">
                <i class="bi bi-robot me-2"></i>SimpleHire
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume/analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/job-matching">岗位匹配</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/reports">报告中心</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="main-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1><i class="bi bi-file-earmark-bar-graph"></i> 报告中心</h1>
            <p>查看和导出您的面试与匹配报告</p>
        </div>
        
        <!-- 统计概览 -->
        <div class="stats-section" th:if="${stats}">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value" th:text="${stats['面试总次数']}">0</div>
                    <div class="stat-label">面试总次数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" th:text="${stats['岗位匹配总次数']}">0</div>
                    <div class="stat-label">岗位匹配总次数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" th:text="${stats['平均面试分数']}">0</div>
                    <div class="stat-label">平均面试分数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" th:text="${stats['平均匹配度']}">0%</div>
                    <div class="stat-label">平均匹配度</div>
                </div>
            </div>
        </div>
        
        <!-- 报告导出 -->
        <div class="reports-section">
            <h2 class="section-title">
                <i class="bi bi-download"></i>
                报告导出
            </h2>
            
            <div class="report-grid">
                <!-- 面试报告 -->
                <div class="report-card">
                    <div class="report-header">
                        <div class="report-icon interview">
                            <i class="bi bi-chat-dots"></i>
                        </div>
                        <div>
                            <h3 class="report-title">面试报告</h3>
                            <p class="report-description">导出详细的面试记录，包含AI问题、用户回答和评分反馈</p>
                        </div>
                    </div>
                    <div class="report-actions">
                        <a href="/reports/comprehensive/excel" class="btn-export primary">
                            <i class="bi bi-file-earmark-excel"></i>
                            导出Excel汇总
                        </a>
                    </div>
                </div>
                
                <!-- 匹配报告 -->
                <div class="report-card">
                    <div class="report-header">
                        <div class="report-icon match">
                            <i class="bi bi-bullseye"></i>
                        </div>
                        <div>
                            <h3 class="report-title">匹配报告</h3>
                            <p class="report-description">导出岗位匹配分析结果，包含技能、经验和学历匹配度</p>
                        </div>
                    </div>
                    <div class="report-actions">
                        <a href="/reports/comprehensive/excel" class="btn-export primary">
                            <i class="bi bi-file-earmark-excel"></i>
                            导出Excel汇总
                        </a>
                    </div>
                </div>
                
                <!-- 综合报告 -->
                <div class="report-card">
                    <div class="report-header">
                        <div class="report-icon comprehensive">
                            <i class="bi bi-graph-up"></i>
                        </div>
                        <div>
                            <h3 class="report-title">综合报告</h3>
                            <p class="report-description">包含所有数据的完整报告，支持Excel格式导出</p>
                        </div>
                    </div>
                    <div class="report-actions">
                        <a href="/reports/comprehensive/excel" class="btn-export primary">
                            <i class="bi bi-file-earmark-excel"></i>
                            导出Excel
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 面试历史 -->
        <div class="reports-section" th:if="${interviews and !interviews.empty}">
            <h2 class="section-title">
                <i class="bi bi-clock-history"></i>
                面试历史
            </h2>
            
            <div class="data-table">
                <table class="table">
                    <thead>
                        <tr>
                            <th>面试时间</th>
                            <th>简历文件</th>
                            <th>评分</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="interview : ${interviews}">
                            <td th:text="${#temporals.format(interview.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
                            <td th:text="${interview.resumeFilename}"></td>
                            <td>
                                <span class="score-badge" 
                                      th:classappend="${interview.score >= 80} ? 'score-excellent' : (${interview.score >= 60} ? 'score-good' : 'score-average')"
                                      th:text="${interview.score} + '分'"></span>
                            </td>
                            <td>
                                <a th:href="@{/reports/interview/{id}/pdf(id=${interview.id})}" 
                                   class="action-btn pdf" target="_blank">
                                    <i class="bi bi-file-pdf"></i>
                                    PDF
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 匹配历史 -->
        <div class="reports-section" th:if="${matches and !matches.empty}">
            <h2 class="section-title">
                <i class="bi bi-target"></i>
                匹配历史
            </h2>
            
            <div class="data-table">
                <table class="table">
                    <thead>
                        <tr>
                            <th>匹配时间</th>
                            <th>岗位名称</th>
                            <th>公司</th>
                            <th>匹配度</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="match : ${matches}">
                            <td th:text="${#temporals.format(match.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
                            <td th:text="${match.jobDescription.title}"></td>
                            <td th:text="${match.jobDescription.companyName}"></td>
                            <td>
                                <span class="score-badge" 
                                      th:classappend="${match.overallScore >= 80} ? 'score-excellent' : (${match.overallScore >= 60} ? 'score-good' : 'score-average')"
                                      th:text="${match.overallScore} + '%'"></span>
                            </td>
                            <td>
                                <a th:href="@{/reports/match/{id}/pdf(id=${match.id})}" 
                                   class="action-btn pdf" target="_blank">
                                    <i class="bi bi-file-pdf"></i>
                                    PDF
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 空状态 -->
        <div class="empty-state" th:if="${(interviews == null or interviews.empty) and (matches == null or matches.empty)}">
            <i class="bi bi-inbox"></i>
            <h3>暂无报告数据</h3>
            <p>完成面试或岗位匹配后，您的报告将显示在这里</p>
            <div style="margin-top: 1.5rem;">
                <a href="/interview" class="btn-export primary">开始面试</a>
                <a href="/job-matching" class="btn-export secondary">岗位匹配</a>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>